<template>
  <div>
    <div class="title">{{ poster.title }}</div>
    <div class="share-card">
      <div class="top-img">
        <img :src="poster.hburl ? poster.hburl : bg" alt="" width="100%">
      </div>
      <div class="user">
        <div class="avatar">
          <img v-if="avatar" :src="avatar" alt="" width="100%">
          <img v-else src="../../../../assets/img/icon-avatar.png" alt="" width="100%">
        </div>
        <div class="username">
          <p class="name">{{ user.name }}</p>
          <p class="des">邀请你一起快乐学音乐</p>
        </div>
      </div>
      <div class="line-item">
        <div class="left shape"></div>
        <div class="line"></div>
        <div class="right shape"></div>
      </div>
      <div class="text">{{ poster.content }}</div>
      <honor :showAdd="false"/>
    </div>
    <div class="share" v-if="!share">
      <div class="share-item" @click="showShare">
        <img src="../../../../assets/img/icon-wx.png" alt="">
        <span>分享好友</span>
      </div>
      <div class="share-item" @click="showShare">
        <img src="../../../../assets/img/icon-friend.png" alt="">
        <span>分享朋友圈</span>
      </div>
    </div>
  </div>
</template>

<script>
import honor from '@/components/honor'
import api from '@/api'
import {wxShare} from '@/utils/auth'
export default {
  name: 'poster',
  data () {
    return {
      poster: {},
      user: sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {},
      bg: require('@/assets/img/share-logo.png'),
      share: false,
      id: '',
      avatar: ''
    }
  },
  methods: {
    showShare () {
      this.$store.commit('SET_SHARE_STUDENT', true)
    },
    initTemplate (id) {
      api.studentPosterTemp({
        params: {teacher_id: id},
        callback: res => {
          if (res.data.error_code === 0 && res.data.data) {
            this.poster = res.data.data
          }
        }
      })
    },
    getWXConfig () {
      let name = encodeURIComponent(this.user.name)
      let avatar = encodeURIComponent(this.avatar)
      let sid = this.$route.query.sid ? this.$route.query.sid : this.user.id
      let tid = this.id
      let url = `http://sae.wecozhiku.com/admin/Curriculum/url2?sid=${sid}&tid=${tid}&name=${name}&avatar=${avatar}`
      wxShare({
        timeLine: {
          title: '快乐学音乐', // 分享标题
          link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://sae.wecozhiku.com/course/img/share.jpg', // 分享图标
          success: () => {
            // this.$toast('分享成功')
          }
        },
        appMessage: {
          title: '快乐学音乐', // 分享标题
          desc: '有坚持就有收获、你将成为最亮的那颗星', // 分享描述
          link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://sae.wecozhiku.com/course/img/share.jpg', // 分享图标
          type: '', // 分享类型,music、video或link，不填默认为link
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
          success: () => {
            // this.$toast('分享成功')
          }
        }
      })
    }
  },
  components: {
    honor
  },
  created () {
    let tid = this.$route.query.tid
    this.id = tid
    if (this.user.head_sculpture) {
      this.avatar = this.user.head_sculpture
    } else if (localStorage.getItem('userInfo')) {
      this.avatar = JSON.parse(localStorage.getItem('userInfo')).headimgurl
    }
    if (this.$route.query.avatar) {
      this.avatar = this.$route.query.avatar
    }
    this.getWXConfig()
    let name = this.$route.query.name
    if (name) {
      this.user.name = name
      this.share = true
      this.$store.commit('SET_SHOWTITLE_STUDENT', false)
    }
    if (tid) {
      this.initTemplate(tid)
    }
  }
}
</script>

<style scoped>
  .line-item{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 16px;
  }
  .line-item .left{
    top: 0;
    left: -8px;
  }
  .line-item .right{
    top: 0;
    right: -8px;
  }
  .line-item .shape{
    height: 16px;
    width: 16px;
    background-color: #fff;
    box-shadow: inset 0 0 8px rgba(0,0,0,.2);
    border-radius: 50%;
    position: absolute;
  }
  .line-item .line{
    height: 1px;
    box-sizing: border-box;
    border-bottom: 1px dashed #707070;
    flex-grow: 1;
    flex-shrink: 1;
    margin: 0 8px;
  }

  .title{
    font-size:18px;
    font-family:PingFang SC;
    font-weight:bold;
    line-height:25px;
    color:rgba(30,30,30,1);
    padding: 20px 15px 0 15px;
  }
  .share-card{
    margin: 20px 15px 0 15px;
    background: rgba(255,255,255,1);
    box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    border-radius: 6px;
  }
  .user{
    display: flex;
    align-items: center;
    padding: 20px 15px;
  }
  .user .avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .user .username{
    flex-grow: 1;
    flex-shrink: 1;
    margin-left: 6px;
  }
  .user .username .name{
    font-size:15px;
    font-family:PingFang SC;
    font-weight:800;
    line-height:21px;
    color:rgba(30,30,30,1);
  }
  .user .username .des{
    font-size:11px;
    font-family:PingFang SC;
    font-weight:400;
    line-height:16px;
    color:rgba(102,102,102,1);
  }
  .text{
    padding: 24px;
    font-size:18px;
    font-family:PingFang SC;
    font-weight:bold;
    line-height:25px;
    color:rgba(30,30,30,1);
    border-bottom: 1px solid #707070;
  }
  .share{
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
    padding-bottom: 40px;
  }
  .share .share-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .share .share-item span{
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 28px;
    color: rgba(153,153,153,1);
  }
</style>
